<template>
  <section class="account-panel b50">
    <van-row class="header-panel border">
      实名认证
      <div class="arrow" @click="goBack()">
        <van-icon name="arrow-left"/>
      </div>
    </van-row>
    <van-row class="form-panel mt44">
      <div class="tips">
        为响应国家防沉迷制度，游戏用户必须进行实名认证，实名认证只是为了保护未成年人，限制未成年游戏时间和游戏充值消费，其他无影响
      </div>
      <van-row :class="['item',active===1&&'on']">
        <van-field
            v-model="form.name"
            clearable
            label-width="60px"
            type="text"
            label="姓名"
            maxlength="10"
            @focus="()=>{this.active=1}"
            @blur="()=>{this.active=-1}"
            placeholder="请输入姓名"
            v-bind:readonly="isIdentifyReadOnly"
        />
      </van-row>
      <van-row :class="['item',active===2&&'on']">
        <van-field
            v-model="form.idCard"
            clearable
            label-width="60px"
            maxlength="18"
            type="text"
            label="身份证号"
            @focus="()=>{this.active=2}"
            @blur="()=>{this.active=-1}"
            placeholder="请输入身份证号"
            v-bind:readonly="isIdentifyReadOnly"
        />
      </van-row>

    </van-row>
    <van-row class="footer">
      <div :class="['form-btns',disabled&&'disabled']" @click="onSubmit" v-if="!this.isIdentifyReadOnly">立即认证</div>
      <div class="form-btns disabled" v-if="this.isIdentifyReadOnly">已经认证</div>
    </van-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
      active: -1,
      form: {
        name: '',
        idCard: '',
      },
      isIdentifyReadOnly: false,
    }
  },
  computed: {
    disabled() {
      return !this.form.name || !this.form.idCard
    }
  },
  created() {
    this.getLoad();
  },
  methods: {
    //初始化加载
    getLoad() {
      let params = {}
      this.$http(window.config.userHomeApi + '/info/get_user_identify', params).then((res) => {
        let code = res.code;
        if (code !== 1) {
          this.BRDialog(res.msg, this.$router.push('/account/home'));
        }
        let data = res.data;
        this.form.name = data['realName'];
        this.form.idCard = data['identifyTips'];
        if (this.BRIsSetString(this.form.name)) {
          this.isIdentifyReadOnly = true;
        }
      });
    },
    //认证
    onSubmit() {
      let realName = this.form.name;
      let identify = this.form.idCard;
      if (!this.BRIsSetString(realName)) {
        this.BRToast('请输入姓名');
        return false;
      }
      if (!this.BRIsSetString(identify)) {
        this.BRToast('请输入身份证号');
        return false;
      }
      if (!this.BRIsIdentify(identify)) {
        this.BRToast('身份号码错误');
        return false;
      }
      let params = {
        "realName": realName,
        "identify": identify,
      }
      this.$http(window.config.userHomeApi + '/info/identify_set', params).then((res) => {
        let code = res.code;
        if (code !== 1) {
          this.BRToast(res.msg);
          return;
        }
        this.$router.push("/account/identifyBindSuccess");
      });
    },

    //返回
    goBack() {
      this.$router.push('/account/home');
    },

  }
};
</script>

<style scoped lang='less'>
@import "../../assets/css/account/index.less";
</style>
